<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>返回顶部</title>
	<style>
         body{
         	height: 2000px;
         }
        .divButton{
        	text-align: center;
        	border:2px solid pink;
        	width: 85px;
        	height: 60px;
        	background-color:yellow;
        	line-height: 60px;
        	cursor: pointer;
        	position: fixed;
        	right:50px;
        	bottom: 10px;
        	display: none;
        }
	</style>
</head>
<body>
    <p>列表项1</p>
    <p>列表项2</p>
    <p>列表项3</p>
    <p>列表项4</p>
    <p>列表项5</p>
    <p>列表项6</p>
    <p>列表项7</p>
    <p>列表项8</p>
    <p>列表项9</p>
    <p>列表项10</p>
    <p>列表项11</p>
    <p>列表项12</p>
    <p>列表项13</p>
    <p>列表项14</p>
    <p>列表项15</p>
    <p>列表项16</p>
    <p>列表项17</p>
    <p>列表项18</p>
    <p>列表项19</p>
    <p>列表项20</p>
    <p>列表项21</p>
    <p>列表项22</p>
    <p>列表项23</p>
    <p>列表项24</p>
    <p>列表项25</p>
    <p>列表项26</p>
    <p>列表项27</p>
    <p>列表项28</p>
    <p>列表项29</p>
    <p>列表项30</p>
    <p>列表项31</p>
    <p>列表项32</p>
    <p>列表项33</p>
    <p>列表项34</p>
    <p>列表项35</p>
    <p>列表项36</p>
    <p>列表项37</p>
    <p>列表项38</p>
    <p>列表项39</p>
    <p>列表项40</p>
    <p>列表项41</p>
    <p>列表项42</p>
    <p>列表项43</p>
    <p>列表项44</p>
    <p>列表项45</p>
    <p>列表项46</p>
    <p>列表项47</p>
    <p>列表项48</p>
    <p>列表项49</p>
    <p>列表项50</p>
    <p>列表项51</p>
    <p>列表项52</p>
    <p>列表项53</p>
    <p>列表项54</p>
    <p>列表项55</p>
    <p>列表项56</p>
    <p>列表项57</p>
    <p>列表项58</p>
    <p>列表项59</p>
    <p>列表项60</p>
    <p>列表项61</p>
    <p>列表项62</p>
    <p>列表项63</p>
    <p>列表项64</p>
    <p>列表项65</p>
    <p>列表项66</p>
    <p>列表项67</p>
    <p>列表项68</p>
    <p>列表项69</p>
    <p>列表项70</p>
    <p>列表项71</p>
    <p>列表项72</p>
    <p>列表项73</p>
    <p>列表项74</p>
    <p>列表项75</p>
    <p>列表项76</p>
    <p>列表项77</p>
    <p>列表项78</p>
    <p>列表项79</p>
    <p>列表项80</p>
    <p>列表项81</p>
    <p>列表项82</p>
    <p>列表项83</p>
    <p>列表项84</p>
    <p>列表项85</p>
    <p>列表项86</p>
    <p>列表项87</p>
    <p>列表项88</p>
    <p>列表项89</p>
    <p>列表项90</p>
    <p>列表项91</p>
    <p>列表项92</p>
    <p>列表项93</p>
    <p>列表项94</p>
    <p>列表项95</p>
    <p>列表项96</p>
    <p>列表项97</p>
    <p>列表项98</p>
    <p>列表项99</p>
    <p>列表项100</p>
    <p>列表项101</p>
    <p>列表项102</p>
    <p>列表项103</p>
    <p>列表项104</p>
    <p>列表项105</p>
    <p>列表项106</p>
    <p>列表项107</p>
    <p>列表项108</p>
    <p>列表项109</p>
    <p>列表项110</p>
    <p>列表项111</p>
    <p>列表项112</p>
    <p>列表项113</p>
    <p>列表项114</p>
    <p>列表项115</p>
    <p>列表项116</p>
    <p>列表项117</p>
    <p>列表项118</p>
    <p>列表项119</p>
    <p>列表项120</p>
    <p>列表项121</p>
    <p>列表项122</p>
    <p>列表项123</p>
    <p>列表项124</p>
    <p>列表项125</p>
    <p>列表项126</p>
    <p>列表项127</p>
    <p>列表项128</p>
    <p>列表项129</p>
    <p>列表项130</p>
    <p>列表项131</p>
    <p>列表项132</p>
    <p>列表项133</p>
    <p>列表项134</p>
    <p>列表项135</p>
    <p>列表项136</p>
    <p>列表项137</p>
    <p>列表项138</p>
    <p>列表项139</p>
    <p>列表项140</p>
    <p>列表项141</p>
    <p>列表项142</p>
    <p>列表项143</p>
    <p>列表项144</p>
    <p>列表项145</p>
    <p>列表项146</p>
    <p>列表项147</p>
    <p>列表项148</p>
    <p>列表项149</p>
    <p>列表项150</p>
    <div class = "divButton">返回顶部</div>
	<script src="../biaodan exercise/jquery-1.12.0.js"></script>
	<script>
		!function() {
			//事件监听 event listener
			var $this = $(this)
           $(window).on('scroll',function (){
           	var st = $this.scrollTop();
           	var $divButton = $('.divButton');
           	var $WHweight = $this.height();
           	if(st>200) {
           		$divButton.slideDown()
           	} else{
           		$divButton.slideUp()
           	}

          	
          })
		}()
	</script>
</body>
</html>